<template id='MailBanner'>
  <div class="MailBanner">
    <van-swipe :autoplay="speed">
      <van-swipe-item v-for="(item, index) in phoneBannerList" :key="index">
        <img v-lazy="item.image" @click="goToPath(item)" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { getBannerListApi } from "@/api";
import { iscode } from "@/utils";
export default {
  name: "MailBanner",
  components: {},
  // 定义属性
  data() {
    return {
      phoneBannerList: [],
      speed: 3000,
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getBannerList() {
      let result = await getBannerListApi();
      if (iscode(result)) {
        this.speed = result.result.rolling_time * 1000;
        this.phoneBannerList = result.result.list;
        this.phoneBannerList.map((item, index) => {
          this.$set(item, "image", result.result.show_url + item.img);
        });
      }
    },
    goToPath(item) {
      window.location.href = item.url;
      console.log(item);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getBannerList();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.MailBanner {
  padding: 0 40px;
  /deep/.van-swipe__indicators {
    display: none;
  }
  /deep/ .van-swipe-item {
    img {
      width: 100%;
      height: 450px;
    }
  }
}
</style>